<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>case4</title>
    <style>
        .red{color:red;}
        .yellow{background:rgb(0.255.255)}
        .fsize{font-size: 20px;}
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
           data() {
               return{
                   message: 'hello vue.js',
                   classString: 'fsize red yellow',
                   classObject:{red:false,yellow: true,fsize: true},
                   classArray:['red','yellow',{fsize: false}],
                   styleString: 'background:yellow',
                   styleObject: {color:'res',background:'yellow'}
               }
           },
            template:`
             <div class='red yellow fsize'> Hello vue.js</div>
             <div :class='classString'>Hello classString vue.js</div>
             <div :class='classObject'>Hello classObject vue.js</div>
             <div :class='classArray'>Hello classArray vue.js</div>
             <div :class='styleString'>Hello styleString vue.js</div>
             <div :class='styleObject'>Hello styleObject vue.js</div>
             `
            })
            //demo 表示组建的名称
            app.component('demo',{
                template: `
                <div :class="$attrs.class">I'm demo1</div>
                `
            });
            const vm = app.mount('#app');
    </script>
</html>